<script setup lang="ts">
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import { useRouter } from 'vue-router';
  import { queryDeviceList } from '@/api/device-management/device';

  const router = useRouter();

  const columns = [
    {
      title: '设备ID',
      dataIndex: 'productId',
    },
    {
      title: '设备名称',
      dataIndex: 'productName',
    },
    {
      title: '设备状态',
      dataIndex: 'productStatusLabel',
    },
    {
      title: '设备类型',
      dataIndex: 'productTypeLabel',
    },
    {
      title: '设备型号',
      dataIndex: 'productModel',
    },
    {
      title: '设备编号',
      dataIndex: 'productSn',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      align: 'center' as const,
      dataIndex: 'action',
      slotName: 'action',
    },
  ];

  const page = usePageTable({
    searchForm: {
      state: {
        productName: '',
        productType: '',
        productStatus: '',
        productSn: '',
      },
    },
    table: {
      fakePage: true,
      apiFun: queryDeviceList,
      columns,
    },
  });

  const showDetail = (record: any) => {
    router.push({
      name: 'DeviceDetail',
      query: {
        id: record.productId,
      },
    });
  };
</script>

<template>
  <TableLayout v-bind="page.bindProps" :create="false">
    <template #searchForm="{ state }">
      <a-form-item field="productName" label="设备名称" label-col-flex="60px">
        <a-input
          v-model="state.productName"
          placeholder="请输入设备名称"
          allow-clear
        />
      </a-form-item>

      <a-form-item field="productStatus" label="设备状态" label-col-flex="60px">
        <dict-select
          v-model="state.productStatus"
          type="ProductStatus"
          placeholder="请选择设备状态"
          allow-clear
        />
      </a-form-item>

      <a-form-item field="productType" label="设备类型" label-col-flex="60px">
        <dict-select
          v-model="state.productType"
          type="ProductType"
          placeholder="请选择设备类型"
          allow-clear
        />
      </a-form-item>

      <a-form-item field="productSn" label="设备编号" label-col-flex="60px">
        <a-input
          v-model="state.productSn"
          placeholder="请输入设备编号"
          allow-clear
        />
      </a-form-item>
    </template>

    <template #action="{ record }">
      <ae-button purpose="view" @click="showDetail(record)"> 详情 </ae-button>
    </template>
  </TableLayout>
</template>

<style lang="less" scoped></style>
